<template>
	<view class="container">
		<view class="uni-inline-item a">
			<image mode="widthFix" src="../../static/images/img.png" class="pic"></image>
			<view class="uni-flex-item">
				<view class="name">孙海平 <image mode="widthFix" src="../../static/images/user_09.png"></image>
				</view>
			</view>
		</view>
		<view class="b">
			<view class="title">车主电子保单</view>
			<view class="bd">
				<view>
					<image mode="widthFix" src="../../static/images/user_02.png" class="pic"></image>
					<view class="p">电子保单记录</view>
				</view>
				<view>
					<image mode="widthFix" src="../../static/images/user_10.png" class="pic"></image>
					<view class="p">激活电子质保</view>
				</view>
			</view>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {}

		},

		methods: {

		}
	}
</script>

<style>
	page {
		background: url(@/static/images/userbg.png) top center no-repeat #f5f9fc;
		background-size: 100% auto;
	}

	.container {
		position: relative;
		padding: 30rpx;
	}

	.container .a .name image {
		width: 38rpx;
		height: 38rpx;
	}

	.container .a .name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.container .a .pic {
		border-radius: 50%;
		margin-right: 20rpx;
		width: 126rpx;
		height: 126rpx;
	}

	.container .b {
		margin-top: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		font-size: 24rpx;
		padding: 30rpx;
	}

	.container .b image {
		width: 58rpx;
		height: 58rpx;
		margin-bottom: 15rpx;
	}

	.container .b .bd {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}

	.container .b .bd>view {
		width: 25%;
		position: relative;
	}

	.container .b .bd text {
		position: absolute;
		font-size: 16rpx;
		color: #fff;
		right: 30rpx;
		top: -10rpx;
		background: #E91E1E;
		border-radius: 50%;
		padding: 0 5rpx;
	}

	.container .b .title {
		font-weight: bold;
		font-size: 32rpx;
		padding-bottom: 30rpx;
		line-height: 40rpx;
	}
</style>
